<div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="createOrEditModal"
    aria-hidden="true"
    [config]="{ backdrop: 'static' }"
    (onHidden)="onHidden()"
>
    <div class="modal-dialog modal-xxl">
        <div class="modal-content">
            <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <div class="col-md-3">{{marketReturnTitle}}</div>

                    <div class="col-md-3">
                        <button type="button" class="close" (click)="cancel()" [attr.aria-label]="l('Close')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>

                <div class="modal-body">
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <div class="m-subheader">
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-5 col-form-label" for="f_BillName">单据名称:</label>
                                        <div class="col-7">
                                            <input
                                                type="text"
                                                class="form-control m-input"
                                                name="f_BillName"
                                                id="f_BillName"
                                                value="{{ this.billbase.f_BillName }}"
                                                readonly
                                            />
                                        </div>
                                    </div>
                                </div>    
                                <div class="col-4">
                                    <div class="form-group m-form__group row">
                                        <label class="col-4 col-form-label" for="selectedPurchaseType">
                                            市采类型:<span class="text-danger">*</span></label>
                                        <div class="col-8">
                                            <camc-dropdown
                                                class="float-left"
                                                id="f_PurchaseType"
                                                [options]="purchaseOption"
                                                name="f_PurchaseType"
                                                [(ngModel)]="selectedPurchaseType"
                                                [style]="{ width: '220px' }"
                                                (onChange)="purchaseChange()"
                                                [disabled]="disabledPurchaseType"
                                            >
                                            </camc-dropdown>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h4 class="m-subheader__title">退货单详细信息</h4>
                            </div>
                            <div class="col-md-6 m--align-right">
                                <div class="btn-group m-btn-group" role="group" aria-label="...">
                                    <button
                                        type="button"
                                        class="btn btn-default m--padding-left-5 m--padding-right-5"
                                        (click)="accountmodalshow()" [disabled]="isitemEdit"
                                    >
                                        新增
                                    </button>
                                    <button
                                        [disabled]="!selectedBill"
                                        type="button"
                                        class="btn btn-default m--padding-left-5 m--padding-right-5"
                                        (click)="delete()"
                                    >
                                        删除
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-12 m--margin-top-20">
                                <p-table
                                    #dataTable
                                    [value]="miliOutBillList"
                                    [paginator]="false"
                                    [lazy]="true"
                                    [scrollable]="true"
                                    ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns"
                                    [(selection)]="selectedBill"
                                    datakey="id"
                                >
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width:25px">
                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                            </th>
                                            <th style="width: 40px">
                                                序号
                                            </th>
                                            <th width="120px">
                                                物资编码
                                            </th>
                                            <th width="120px">
                                                物资名称
                                            </th>
                                            <th width="90px">
                                                退货数量
                                            </th>
                                            <th width="90px">
                                                可退数量
                                            </th>
                                            <th width="100px">
                                                计量单位
                                            </th>
                                            <th width="120px">
                                                原仓库
                                            </th>
                                            <th width="120px">
                                                原仓存放地点
                                            </th>
                                            <th width="120px">
                                                市采类型
                                            </th>
                                            <th width="120px">
                                                品牌
                                            </th>
                                            <th width="65px">
                                                状态
                                            </th>
                                            <th width="120px">
                                                技术条件
                                            </th>
                                            <th width="120px">
                                                规格
                                            </th>
                                            <th width="120px">
                                                尺寸
                                            </th>
                                            <th width="120px">
                                                单价
                                            </th>
                                        </tr>
                                    </ng-template>

                                    <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                        <tr [pSelectableRow]="record">
                                            <td style="width: 25px">
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td style="width: 40px">
                                                {{ i + 1 }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_MaterialCode }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_MaterialName }}
                                            </td>
                                            <td width="90px">
                                                <input
                                                    type="number"
                                                    [(ngModel)]="record.f_Quantity"
                                                    style="width: 100%;"
                                                    required
                                                    [name]="'f_Quantity_' + i"
                                                    min="1"
                                                />
                                            </td>
                                            <td width="90px" style="text-align:right;">
                                                {{record.f_RealUsable | number: '1.3-3'}}
                                            </td>
                                            <td width="100px">
                                                {{ record.f_Unit }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_WarehouseName }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_Location }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_PurchaseType }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_TradeMark }}
                                            </td>
                                            <td width="65px">
                                                {{ record.f_Station }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_TecCondition }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_Specification }}
                                            </td>
                                            <td width="120px">
                                                {{ record.f_Size }}
                                            </td>
                                            <td width="120px" required>
                                                {{ record.f_UnitPrice }}
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button [disabled]="saving" type="button" class="btn btn-default" (click)="cancel()">
                            {{ l('Cancel') }}
                        </button>

                        <button
                            type="submit"
                            class="btn btn-primary blue"
                            [disabled]="!editForm.form.valid"
                            [buttonBusy]="saving"
                            [busyText]="l('SavingWithThreeDot')"
                        >
                            <i class="fa fa-save"></i>
                            <span>{{ l('Save') }}</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
